.cm-progress {
    position: relative;
    width: 100%;
    display: inline-flex;
    align-items: center;
    font-size: 0px;
    color: var(--cui-color-text-2);

    .cm-progress-outer {
        flex: 1;
        display: flex;
    }

    .cm-progress-inner {
        display: inline-block;
        width: 100%;
        background-color: var(--cui-color-fill-0);
        border-radius: 100px;
        vertical-align: middle;
    }

    .cm-progress-info {
        display: inline-block;
        margin-left: 8px;
        font-family: tahoma;
        font-size: 12px;
    }

    &.cm-progress-line {
        svg {
            width: 12px;
            height: 12px;
        }
    }

    .cm-progress-bar {
        border-radius: 100px;
        background-color: var(--cui-color-primary);
        -webkit-transition: all .4s cubic-bezier(.08, .82, .17, 1) 0s;
        transition: all .4s cubic-bezier(.08, .82, .17, 1) 0s;
        position: relative;
        height: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;

        .cm-progress-info {
            color: #fff !important;
            margin-right: 10px;
        }
    }

    .cm-progress-bar-path {
        stroke: var(--cui-color-primary);
    }

    &.cm-progress-finished {
        .cm-progress-bar {
            background-color: rgb(var(--cui-green-4));
        }

        .cm-progress-info {
            color: rgb(var(--cui-green-4));
        }

        .cm-progress-bar-path {
            stroke: rgb(var(--cui-green-4));
        }
    }

    &.cm-progress-error {
        .cm-progress-bar {
            background-color: rgb(var(--cui-red-4));
        }

        .cm-progress-info {
            color: rgb(var(--cui-red-4));
        }

        .cm-progress-bar-path {
            stroke: rgb(var(--cui-red-4));
        }
    }

    &.cm-progress-active {
        .cm-progress-bar {
            &:before {
                content: "";
                opacity: 0;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: #fff;
                border-radius: 10px;
                -webkit-animation: cm-progress-active 2.4s cubic-bezier(.23, 1, .32, 1) infinite;
                animation: cm-progress-active 2.4s cubic-bezier(.23, 1, .32, 1) infinite;
            }
        }
    }

    &.cm-progress-circle {
        width: auto;

        .cm-progress-outer {
            width: auto;
            padding-right: 0;
            margin-right: 0;
        }

        .cm-progress-inner {
            position: relative;
            line-height: 1;
            font-size: 25px;
            background-color: transparent;
        }

        .cm-progress-info {
            display: block;
            position: absolute;
            width: 100%;
            text-align: center;
            line-height: 1;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            left: 0;
            font-family: tahoma;
            margin: 0;
            font-size: 24px;
        }

        circle {
            stroke: var(--cui-color-fill-0);
        }
    }

    .cm-progress-bar-path {
        transition: stroke-dashoffset 0.3s ease 0s, stroke 0.3s ease;
    }

    &.cm-progress-hide-info {
        .cm-progress-info {
            display: none;
        }
    }

    &.cm-progress-vertical {
        height: 100%;
        width: auto;
        flex-direction: column;

        .cm-progress-outer {
            height: 100%;
            display: inline-block;
        }

        .cm-progress-inner {
            height: 100%;
        }

        .cm-progress-info {
            margin: 0;
            display: none;
        }

        &.cm-progress-active {
            .cm-progress-bar {
                &:before {
                    -webkit-animation: cm-progress-active-vertical 2.4s cubic-bezier(.23, 1, .32, 1) infinite;
                    animation: cm-progress-active-vertical 2.4s cubic-bezier(.23, 1, .32, 1) infinite;
                }
            }
        }
    }
}

@-webkit-keyframes cm-progress-dash {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes cm-progress-dash {
    0% {
        stroke-dashoffset: 1000;
    }

    50% {
        stroke-dashoffset: 200;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@-webkit-keyframes cm-progress-active {
    0% {
        opacity: .1;
        width: 0
    }

    20% {
        opacity: .5;
        width: 0
    }

    to {
        opacity: 0;
        width: 100%
    }
}

@keyframes cm-progress-active {
    0% {
        opacity: .1;
        width: 0
    }

    20% {
        opacity: .5;
        width: 0
    }

    to {
        opacity: 0;
        width: 100%
    }
}

@keyframes cm-progress-active-vertical {
    0% {
        opacity: .1;
        height: 0
    }

    20% {
        opacity: .5;
        height: 0
    }

    to {
        opacity: 0;
        height: 100%
    }
}